/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
import { useState, useEffect } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import "antd/dist/reset.css";
import DashBoard from "./views/dashboard/dashboard";
import MainLayout from "./layout";
import { Routes, Route, useRoutes } from "react-router-dom";
import Login from "./views/login";
import CatePub from "./views/category/pub";
import CateList from "./views/category/list";
import { IMenuType } from "@/types/router";
import { adminRoutes } from "@/router";
import RequireAuth from "./guard/RequireAuth";
import { useAppSelector } from "./store/hook";
import NotFound from "./views/not-found";

function App() {
  // const routes = useRoutes(adminRoutes);  //数据包格式要符合useRoutes的要求
  const [filterRoutes, setFilterRoutes] = useState<Array<IMenuType>>([]); //将adminRoutes数据包处理为路由渲染可用的数据包
  const { userInfo } = useAppSelector((state) => state.user);
  useEffect(() => {
    let arr: Array<IMenuType> = [];

    adminRoutes.forEach((item) => {
      if (item.children) {
        arr = [...arr, ...item.children];
      } else {
        arr.push(item);
      }
    });
    if (userInfo) {
      let { checkedKeys } = userInfo.role;
      arr = arr.filter((item) =>
        (checkedKeys as Array<string>).includes(item.key)
      );
    }
    // console.log(arr);
    setFilterRoutes(arr);
  }, []);
  return (
    <Routes>
      <Route
        path="/"
        element={
          <RequireAuth>
            <MainLayout />
          </RequireAuth>
        }
      >
        {/* <Route path="/" element={<DashBoard />} />
        <Route path="/category/pub" element={<CatePub />} />
        <Route path="/category/list" element={<CateList />} /> */}
        {filterRoutes.map((item) => {
          return (
            <Route path={item.key} element={item.element} key={item.key} />
          );
        })}
        {/* {routes} */}
      </Route>
      <Route path="/login" element={<Login />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;
